<template>
	<view class="container">
		<!-- 购物车内容显示 -->
		<z-paging ref="paging" v-model="list" @query="getProductCarsPageList" class="box_content"
			:style="'height:' +repzingHeight+'px;'">
			<uniSwipeAction>
				<view class="box_content_one" v-for="item in list" :key='item.id'>
					<uniSwipeActionItem :rightOptions="item.options" @click="deleteMessage(item)">
						<view class="swipe-action-item">
							<view class="box_content_oput">

								<view class="box_content_oput_input">
									<checkbox-group @change.stop="checkboxChange($event,item.id)">
										<checkbox :value="item.id" :checked="item.isChecked" />
									</checkbox-group>
								</view>
								<image class="image" @click="toGoodsDetail(item)"
									:src="item.productImg||'https://dnsverify.pfmoto.com/appstatic/img/my/appoint_img_small.png'"
									mode=""></image>
							</view>
							<view class="box_content_number" @click="toGoodsDetail(item)">
								<view class="box_content_view1">
									<view class="box_content_title">
										{{item.productName}}
									</view>
									<view class="box_content_effect">
										{{item.productItemDescription}}
									</view>
								</view>


								<view class="box_content_view">
									<view class="box_content_and" v-if="item.payType==3">
										<view class="box_content_number_discount">
											￥{{item.price}}
										</view>
										<block v-if="item.point!=null&&item.point!=''">
											<view class="box_content_number_discount" style="margin: 8rpx;">
												+
											</view>
											<view class="box_content_number_discount">
												{{item.point||0}}分
											</view>
										</block>
									</view>
									<view class="box_content_and" v-else-if="item.payType==2">
										<view class="box_content_number_discount">
											{{item.point||0}}分
										</view>
									</view>
									<view class="box_content_and" v-else>
										<view class="box_content_number_discount">
											￥{{item.price}}
										</view>
									</view>

									<view class="calculator">
										<view class="left_i" @tap.stop="editNum(item.id,-1)">
											<u-icon name="minus" size="12" color="#000000"></u-icon>
										</view>
										<text class="center_con">{{item.num}}</text>
										<view class="right_i" @tap.stop="editNum(item.id,1)">
											<u-icon name="plus" size="12" color="#000000"></u-icon>
										</view>
									</view>
								</view>
							</view>


						</view>

					</uniSwipeActionItem>

				</view>
			</uniSwipeAction>
		</z-paging>

		<view class="page-bottom iphonex-bottom" id="pageBottom">
			<view class="icon-btn">
				<view class="icon-btn-item">

					<view class="all">
						<checkbox-group @change="checkboxChangeAll">
							<checkbox :checked="isAllChecked" />全选
						</checkbox-group>
					</view>
					<view class="totalPrice">
						<text class="totalPrice_ff">合计:</text>
						<text class="totalPrice_red" style="margin-left: 8rpx;"
							v-if="totalPrice!=0">￥{{totalPrice}}</text>
						<text class="totalPrice_red" v-if="totalPrcs!=0&&totalPrice!=0"
							style="margin-left: 8rpx;margin-right: 8rpx;">+</text>
						<text class="totalPrice_red" v-if="totalPrcs!=0">{{totalPrcs}}积分</text>
					</view>
				</view>

			</view>

			<!-- 正常结算页面 -->
			<view class="buy-btn">

				<view class="to-buy to-store-btn" @click="submitOrder">结算</view>
			</view>
		</view>


	</view>
</template>

<script>
	const dialog = require("@/utils/dialog.js");
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');

	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action';
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item';

	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem

		},
		data() {
			return {
				bottomHeight: 118,
				repzingHeight: 0,
				show: true,
				isAllChecked: false, //是否全选
				totalPrice: 0, //总价
				totalPrcs: 0, //总积分
				//商品
				list: [],
				buyList: []

			}
		},


		onLoad() {
			var that = this
			that.repzingHeight = app.globalData.windowHeight - that.bottomHeight - 30
			uni.createSelectorQuery().select('#pageBottom').boundingClientRect(function(rect) {
				that.bottomHeight = app.globalData.windowHeight - rect.top;
				that.repzingHeight = app.globalData.windowHeight - that.bottomHeight - 30

			}).exec();

		},
		onShow() {
			this.$nextTick(function() {
				this.$refs.paging.reload();
			})
			this.totalPrice = 0
			this.totalPrcs = 0
		},
		methods: {
			//跳转商品详情
			toGoodsDetail: function(item) {
				if (item.productType == '2') { //秒杀
					uni.navigateTo({
						url: '/module_mall/goodsDetail/goodsDetail?goodid=' + item.productId +
							'&isSeckill=true'
					})
				} else {
					uni.navigateTo({
						url: '/module_mall/goodsDetail/goodsDetail?goodid=' + item.productId
					})
				}
			},
			//删除购物车商品
			deleteMessage: function(item) {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCARS_BATCHDELETEPRODUCTCARS;
				var params = {
					idsStr: item.id,
					userId: app.getUserId()
				};
				this.$network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						if (res.data == '删除成功') {
							this.$refs.paging.reload(this.list);
							// that.isAllChecked = false
							// that.list.forEach(v => v.isChecked = that.isAllChecked)
							// that.setCart()
							 
							
						}
					} else {
						dialog.toast(res.message);
					}
				}).catch(err => {
					console.log(err)
				});
			},
			//查询购物车列表(分页)
			getProductCarsPageList(pageNo, pageSize) {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCARS_GETPRODUCTCARSPAGELIST;
				var params = {
					pageNum: pageNo,
					pageSize: pageSize,
					userId: app.getUserId()
				};
				this.$network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						this.list = res.data.list
						for (var i = 0; i < this.list.length; i++) {
							this.list[i].options = [{
								text: '删除',
								icon: 'trash',
								iconSize: '24',
								style: {
									backgroundColor: '#EA5404',
									width: '42px'
								}
							}]
							this.list[i].isChecked = false

							if (this.list[i].payType == '1') { //纯现金支付
								this.list[i].price = this.list[i].price
								this.list[i].point = 0
							} else if (this.list[i].payType == '2') { //纯积分支付
								this.list[i].price = 0
								this.list[i].point = this.list[i].point
							} else if (this.list[i].payType == '3') { //混合支付
								this.list[i].price = this.list[i].mixturePrice
								this.list[i].point = this.list[i].mixturePoint
							}
						}

						this.$refs.paging.complete(this.list);
						 
						that.isAllChecked = false
						that.list.forEach(v => v.isChecked = that.isAllChecked)
						
						that.setCart()

					} else {
						dialog.toast(res.message);
					}
				}).catch(err => {
					console.log(err)
				});
			},
			setCart() { //计算总价
				var that = this
				let totalPrice = 0
				let totalPrcs = 0
				var buyList = []
				that.list.forEach(v => {
					if (v.isChecked) {
						totalPrice += v.num * (v.price*1000)
						totalPrcs += v.num * v.point
						buyList.push(v)
					}
				})
				that.totalPrice = totalPrice/1000
				that.totalPrcs = totalPrcs
				that.buyList = buyList
			},
			editNum(id, type) { //编辑数量
				var that = this
				const index = that.list.findIndex(v => v.id == id)
				if (parseInt(that.list[index].num) == 1 && type == -1) {
					uni.showToast({
						title: '至少购买一件商品',
						icon: 'none'
					})
				} else {
					that.list[index].num = parseInt(that.list[index].num) + type
					that.updateProductCarsNum(that.list[index].num, that.list[index].id)
				}
				// that.setCart()
			},
			//修改购物车商品数量
			updateProductCarsNum: function(num, productsCarId) {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCARS_UPDATEPRODUCTCARSNUM;
				var params = {
					num: num,
					productsCarId: productsCarId,
					userId: app.getUserId()
				};
				this.$network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						if (res.data == '更新成功') {
							that.setCart()
						}

					} else {
						dialog.toast(res.message);
					}
				}).catch(err => {
					console.log(err)
				});
			},

			// 全选
			checkboxChangeAll(e) {
				var that = this
				that.isAllChecked = !that.isAllChecked
				that.list.forEach(v => v.isChecked = that.isAllChecked)
				that.setCart()
			},

			// 选择每一项
			checkboxChange: function(e, id) {
				console.log(e, id)
				var that = this
				var temp = []

				// 找到被修改的商品对象
				let index = that.list.findIndex(v => v.id === id)
				// 选中状态取反
				that.list[index].isChecked = !that.list[index].isChecked

				temp = that.list.every(v => v.isChecked)
				if (temp) {
					that.isAllChecked = true
				} else {
					that.isAllChecked = false
				}
				that.setCart()
			},
			submitOrder() { // 提交购物车订单
				// 判断是否选择购物车商品
				var that = this
				var bol = false
				for (var i = 0; i < that.list.length; i++) {
					if (that.list[i].isChecked == true) {
						bol = true
					}
				}
				if (bol == false) {
					dialog.toast('您还没有选择商品哦')
				} else {
					var buyListJson = JSON.stringify(that.buyList)

					uni.navigateTo({
						url: '/module_mall/order/fillOrder?totalPrice=' + that.totalPrice + '&totalPrcs=' +
							that.totalPrcs + "&buyListJson=" + buyListJson+ '&from=shoppingCart'
					})
				}
			}



		}
	}
</script>

<style>
	/* page{
		background-color: #E5E5E5;
	} */
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}
</style>
<style scoped lang="scss">
	// 底部操作条
	.iphonex-bottom {
		padding-bottom: 46upx;
	}

	.box_content {


		.box_content_one {
			width: 686rpx;
			height: 240rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 30rpx auto;

			.swipe-action-item {
				height: 240rpx;
				display: flex;

				box-sizing: border-box;
				position: relative;
				flex-direction: row;



				.box_content_oput {
					display: flex;
					align-items: center;
					justify-content: center;


					.box_content_oput_input {
						padding: 0rpx 20rpx;
					}

					.image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 2px;
					}
				}

				.box_content_number {
					padding: 0rpx 20rpx;
					height: 180rpx;
					align-self: center;
					display: flex;
					flex-direction: column;



					.box_content_view1 {
						flex-grow: 1;

						.box_content_title {
							width: 380rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #3D3A3A;
							line-height: 40rpx;


							//字体超出一行 隐藏显示省略号
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.box_content_effect {
							font-style: normal;
							font-weight: 400;
							font-size: 24rpx;
							line-height: 34rpx;
							color: #ADB0AE;
							margin-top: 8rpx;
						}
					}



					.box_content_view {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.box_content_and {
							display: flex;
							flex-direction: row;
							padding: 10rpx 0rpx;
							align-items: center;

							.box_content_number_discount {
								font-style: normal;
								font-weight: 400;
								font-size: 12px;
								line-height: 14px;
								color: #EA5404;
							}
						}
					}

					.calculator {
						display: flex;

						.left_i {
							width: 54rpx;
							height: 48rpx;
							background: #EDEDED;
							border: 1px solid #EDEDED;
							border-radius: 4px 0px 0px 4px;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.center_con {
							width: 54rpx;
							height: 48rpx;
							background: #FFFFFF;
							border: 1px solid #EDEDED;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.right_i {
							width: 54rpx;
							height: 48rpx;
							background: #EDEDED;
							border: 1px solid #EDEDED;
							border-radius: 0px 4px 4px 0px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}

	.page-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		// z-index: 9;
		background: #fff;
		height: 144rpx;
		width: 100%;
		display: flex;
		border-top: 1rpx solid #f2f2f2;
		box-sizing: border-box;
		padding: 32upx;
		align-items: center;

		.icon-btn {
			display: flex;
			align-items: center;

			flex: 1;

			.icon-btn-item {
				flex: 1;
				position: relative;
				text-align: center;
				font-size: 22rpx;
				color: #262626;
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: start;

				.totalPrice {
					margin-left: 40rpx;

					.totalPrice_ff {
						font-style: normal;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 28rpx;
						color: #3D3A3A;
					}

					.totalPrice_red {
						font-style: normal;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 28rpx;
						color: #EA5404;

					}
				}

			}
		}

		.buy-btn {
			// flex:1.5;
			display: flex;
			align-items: center;
			height: 72rpx;
			border: 1px solid #EA5404;

			.to-buy {
				background: #EA5404;
				color: #fff;
			}

			>.to-store-car {
				color: #EA5404;
			}

			>.to-store-btn {
				flex: 1;
				width: 184rpx;
				text-align: center;
				line-height: 72rpx;
				font-size: 28rpx;
				padding: 0;
			}
		}
	}


	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #EA5404;
		border: #FFFFFF;
		width: 22px;
		height: 22px;
		border-radius: 22px;
	}


	/deep/uni-checkbox .uni-checkbox-input {
		margin-right: 5px;
		-webkit-appearance: none;
		appearance: none;
		outline: 0;
		border: 1px solid #d1d1d1;
		background-color: #fff;
		border-radius: 20px;
		width: 20px;
		height: 20px;
		position: relative;
	}

	/deep/ .uni-swipe_button {
		flex-direction: column !important;
		border-top-right-radius: 12rpx !important;
		border-bottom-right-radius: 12rpx !important;
		height: 240rpx;
		margin-top: 2rpx;
		margin-right: 2rpx;
	}

	/deep/.uni-swipe_button-text {
		font-size: 20rpx !important;
		line-height: 38rpx !important;
	}

	/deep/.page-bottom .icon-btn .icon-btn-item {


		font-weight: 400 !important;
		font-size: 14px !important;
		line-height: 14px !important;
		color: #3D3A3A !important;
		align-self: center !important;
	}
</style>
